---
title: Tailwind CSS Badge - Components Library @David UI
description: Highlight content with Tailwind CSS badge components from David UI. Ideal for notifications or labels with responsive, customizable styles.
github: badge
prev: docs/react/avatar
next: docs/react/card
---

# Tailwind CSS Badge

Highlight content with the badge component from the David UI components library. 

Whether for notifications, labels, or status indicators, this Tailwind CSS-styled component is customizable to fit any theme.

See our examples to explore various sizes, colors, and configurations for versatile use.

---

## Basic Badge

Start with this simple badge setup, featuring a notification button and a small indicator for displaying the number of notifications. The badge is interactive and can respond to user clicks.

<PreviewWithCode relativePath="badge/badge-demo.tsx" language="html" />

---

## Badge Colors

Choose from a variety of badge colors, including  `primary`, `secondary`, `info`, `success`, `warning`, and `error`. Easily apply these colors to your badge by using the corresponding classes. The example below showcases the available options for integrating badge colors into your project.

<PreviewWithCode relativePath="badge/badge-colors.tsx" language="html" />

---

## Badge Placement

Discover how to position badges in various relative locations within a container. This example demonstrates flexible placement options to customize the badge layout to your design needs.

<PreviewWithCode relativePath="badge/badge-placement.tsx" language="html" />

---

## Badge Dot

Implement a simple badge with a color indicator instead of text. This style is ideal for subtle visual cues, such as highlighting a settings button or drawing attention to specific elements in the UI.

<PreviewWithCode relativePath="badge/badge-dot.tsx" language="html" />

---

## Badge Overlap

Learn how to effectively overlay badge indicators on UI elements. These examples demonstrate how badges can convey extra information or enhance visual aesthetics in your design.

<PreviewWithCode relativePath="badge/badge-overlap.tsx" language="html" />

---

## Badge with Border

Use this bordered badge to notify users about unread messages, alerts, or other key updates. The indicator provides clear and concise visual feedback.

<PreviewWithCode relativePath="badge/badge-with-border.tsx" language="html" />

---

## Badge Custom Styles

Incorporate a badge that represents completed or acknowledged states. Styled as a small circular badge, it features a black background, white border, shadow effects, and an SVG checkmark icon, symbolizing a positive or finished status.

<PreviewWithCode relativePath="badge/badge-custom-styles.tsx" language="html" />




